<template>
  <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>
</template>

<script setup>
import { ref } from "vue";
import UQRCode from "uqrcodejs";

const qrCodeUrl = ref("");

const generateQRCode = async (data) => {
  var qr = new UQRCode();
  qr.data = data;
  qr.size = 100;
  qr.make();

  var canvasContext = uni.createCanvasContext("qrcode", this);

  qr.canvasContext = canvasContext;
  qr.drawCanvas();
  return new Promise((resolve, reject) => {
    uni.canvasToTempFilePath({
      canvasId: "qrcode",
      fileType: "jpg",
      width: 100,
      height: 100,
      success: (res) => {
        qrCodeUrl.value = res.tempFilePath;
        resolve(res.tempFilePath);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
};

defineExpose({ generateQRCode });
</script>

<style lang="scss" scoped>
.qrcode {
  position: fixed;
  left: 100%;
}
</style>
